<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CheckAll</title>
	<style type="text/css">
li{list-style:none;}


	</style>
	<script type="text/javascript">
		
onload = function() {
	//全选框对象
	var oAll = document.getElementsByName('all')[0];
	//input对象组
	var oInputs = document.getElementsByName('id[]');
	
	//全不选按钮对象
	var oNone = document.getElementById('none');
	//反选按钮对象
	var oOpposite = document.getElementById('opposite');

	for (var i = 0; i < oInputs.length; i++) {
		oInputs[i].onclick = check_oAll;
	}



	//全选
	oAll.onclick = function() {
		for(var i = 0;i < oInputs.length;i++) {
			oInputs[i].checked = oAll.checked;
		}
	}
	//全不选
	oNone.onclick = function() {
		for(var i = 0;i < oInputs.length;i++) {
			oInputs[i].checked = false;
			check_oAll();
		}
	}

	//反选
	oOpposite.onclick = function() {
		for (var i = 0; i < oInputs.length; i++) {
			oInputs[i].checked = !oInputs[i].checked;
		}
		check_oAll();
	}


	//随时检查全选框
	function check_oAll() {
		for (var i = 0; i < oInputs.length; i++) {
			if (oInputs[i].checked == false) {
				oAll.checked = false;
				return true;
			}
			oAll.checked = true;
		}
	}



}


	</script>
</head>
<body>
	<li><input type="checkbox" name="id[]"></li>
	<li><input type="checkbox" name="id[]"></li>
	<li><input type="checkbox" name="id[]"></li>
	<li><input type="checkbox" name="id[]"></li>
	<li><input type="checkbox" name="id[]"></li>
	<hr />
	<input type="checkbox" name="all">
	<button id="none">全不选</button>
	<button id="opposite">反选</button>
</body>
</html>